<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>IC卡信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理IC卡信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 搜索与添加区 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="param"
            class="input-with-select"
            clearable
            @clear="getCardList()"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="IC卡号" value="cardId"></el-option>
              <el-option label="车位编号" value="seatNum"></el-option>
              <el-option label="用户名" value="userName"></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getCardList()"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加IC卡</el-button
          >
        </el-col>
      </el-row>

      <!-- IC列表区域 -->
      <el-table :data="cardList" border stripe>
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="cardId" label="IC卡号"> </el-table-column>
        <el-table-column prop="seatNum" label="车位编号"> </el-table-column>
        <el-table-column prop="userName" label="用户名称"> </el-table-column>
        <el-table-column prop="userGender" label="用户性别"> </el-table-column>
        <el-table-column prop="userAddr" label="家庭住址"> </el-table-column>
        <el-table-column prop="carNum" label="车牌号码"> </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="showEditDialog(scope.row.cardId)"
              ></el-button>
            </el-tooltip>

            <!-- 删除 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeCardById(scope.row.cardId)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加IC卡对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
      >
        <!-- 主体区域 -->
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="80px"
        >
          <el-form-item label="车位编号" prop="seatId">
            <el-select v-model="addForm.seatId" placeholder="请选择">
              <el-option
                v-for="seat in seatInfo"
                :key="seat.seatId"
                :label="seat.seatNum"
                :value="seat.seatId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="addForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="addForm.userGender" placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址" prop="userAddr">
            <el-input v-model="addForm.userAddr"></el-input>
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNum">
            <el-input v-model="addForm.carNum"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCard()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改IC卡对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <!-- 主体区域 -->
        <el-form
          :model="editFrom"
          :rules="addFormRules"
          ref="editFromRef"
          label-width="80px"
        >
          <el-form-item label="IC卡编号">
            <el-input v-model="editFrom.cardId" disabled></el-input>
          </el-form-item>
          <el-form-item label="车位编号" prop="seatId">
            <el-select v-model="editFrom.seatNum" placeholder="请选择">
              <el-option
                v-for="seat in seatInfo"
                :key="seat.seatId"
                :label="seat.seatNum"
                :value="seat.seatId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名称" prop="userName">
            <el-input v-model="editFrom.userName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="editFrom.userGender" placeholder="请选择">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址" prop="userAddr">
            <el-input v-model="editFrom.userAddr"></el-input>
          </el-form-item>
          <el-form-item label="车牌号码" prop="carNum">
            <el-input v-model="editFrom.carNum"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCard()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: '',
      param: '',
      cardList: [],
      total: null,
      //   当前的页数
      pageNum: 1,
      //   当前每页显示多少条数据
      pageSize: 10,
      // 控制添加对话框显示
      addDialogVisible: false,
      // 车位信息
      seatInfo: [],
      addForm: {
        seatId: '',
        userName: '',
        userGender: '男',
        userAddr: '',
        carNum: '',
      },
      addFormRules: {
        seatId: [
          { required: true, message: '请选择车位编号', trigger: 'change' },
        ],
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        userAddr: [
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
        ],
        carNum: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' },
        ],
      },
      // 控制修改对话框显示
      editDialogVisible: false,
      // 查询到的IC卡信息对象
      editFrom: {},
    }
  },
  created() {
    this.getCardList()
    this.getSeatInfo()
  },
  methods: {
    async getCardList() {
      let query = this.select
      let res
      if (query == 'cardId') {
        res = await this.$http.post('card/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          cardId: this.param,
        })
      } else if (query == 'seatNum') {
        res = await this.$http.post('card/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          seatNum: this.param,
        })
      } else if (query == 'userName') {
        res = await this.$http.post('card/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userName: this.param,
        })
      } else {
        res = await this.$http.post('card/list', {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
      }
      console.log(res)
      this.total = res.data.total
      this.cardList = res.data.list
    },
    // 监听 pageSize
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getCardList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPageNum) {
      this.pageNum = newPageNum
      this.getCardList()
    },
    async showEditDialog(id) {
      // 显示修改对话框
      const { data: res } = await this.$http.get('card/updateInfo/' + id)
      this.editFrom = res
      this.editDialogVisible = true
      console.log(this.editFrom.seatId.length)
    },
    // 修改IC卡
    editCard() {
      this.$refs.editFromRef.validate((valid) => {
        if (!valid) return this.$message.warning('数据校验失败')
        if (this.editFrom.seatNum.length == 14) {
          this.editFrom.seatId = this.editFrom.seatNum
        }
        this.$http
          .post('card/update/' + this.editFrom.cardId, this.editFrom)
          .then((result) => {
            this.editDialogVisible = false
            this.getCardList()
            this.$message.success('修改成功')
          })
      })
    },
    // 监听修改对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFromRef.resetFields()
    },
    async removeCardById(id) {
      // 删除
      const confirmResult = await this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err) // 取消删除

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      const res = await this.$http.post('card/delete/' + id)
      if (res.code == 200) {
        console.log(res);
        this.$message.success('删除成功')
        this.getCardList()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 获取车位信息
    getSeatInfo() {
      this.$http.get('seat/getSeatInfo').then((result) => {
        this.seatInfo = result.data
      })
    },
    // 监听添加对话框的关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // 添加IC卡
    addCard() {
      // 判断是否通过校验
      this.$refs.addFormRef.validate((valid) => {
        if (!valid) return this.$message.warning('数据校验失败')
        this.$http.post('card/create', this.addForm).then((result) => {
          this.addDialogVisible = false
          this.getCardList()
          this.$message.success('添加成功')
        })
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-select {
  width: 120px;
}
</style>
